import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import styles from './index.module.less';

const DockPanel = (props) => {
  const { className, style, mode, children, onChange } = props;

  const RowCol = useRef([
    { gridRowStart: 1, gridColumnStart: 1 },
    { gridRowStart: 1, gridColumnStart: 2 },
    { gridRowStart: 2, gridColumnStart: 1 },
    { gridRowStart: 2, gridColumnStart: 2 },
  ]).current;

  const items = useRef([
    { tag: null, ref: React.createRef() },
    { tag: null, ref: React.createRef() },
    { tag: null, ref: React.createRef() },
    { tag: null, ref: React.createRef() },
  ]).current;

  const updateOptions = () => {
    const length = children
      ? (Array.isArray(children) ? children : [children]).filter((c) => {
          return c.props.tag !== null;
        }).length
      : 0;
    RowCol.splice(0, RowCol.length);
    items.splice(0, items.length);
    if (mode === 'nplus1') {
      if (length === 1) {
        RowCol.push({ gridRowStart: 1, gridRowEnd: 4, gridColumnStart: 1, gridColumnEnd: 3 });
      }
      else{
        RowCol.push({ gridRowStart: 1, gridRowEnd: 4, gridColumnStart: 1, gridColumnEnd: 2 });
        RowCol.push({ gridRowStart: 1, gridRowEnd: 2, gridColumnStart: 2, gridColumnEnd: 3 });
        RowCol.push({ gridRowStart: 2, gridRowEnd: 3, gridColumnStart: 2, gridColumnEnd: 3 });
        RowCol.push({ gridRowStart: 3, gridRowEnd: 4, gridColumnStart: 2, gridColumnEnd: 3 });
      }
      for (let i = 0; i < length; i += 1) {
        items.push({ tag: null, ref: React.createRef() });
      }
      window.console.log({ RowCol, items });
      return null;
    }
    // 默认情况
    if (length === 1) {
      RowCol.push({ gridRowStart: 1, gridRowEnd: 3, gridColumnStart: 1, gridColumnEnd: 3 });
      items.push({ tag: null, ref: React.createRef() });
    } else if (length === 2) {
      RowCol.push({ gridRowStart: 1, gridRowEnd: 3, gridColumnStart: 1, gridColumnEnd: 2 });
      RowCol.push({ gridRowStart: 1, gridRowEnd: 3, gridColumnStart: 2, gridColumnEnd: 3 });
      items.push({ tag: null, ref: React.createRef() });
      items.push({ tag: null, ref: React.createRef() });
    } else {
      for (let i = 0; i < length; i += 1) {
        if (i % 2 === 0) {
          for (let j = 0; j < 2; j += 1) {
            if (RowCol.length < length) {
              RowCol.push({
                gridRowStart: parseInt(i / 2, 10) + 1,
                gridRowEnd: 'unset',
                gridColumnStart: j + 1,
                gridColumnEnd: 'unset',
              });
            }
          }
        }
        items.push({ tag: null, ref: React.createRef() });
      }
    }
    window.console.log({ RowCol, items });
    return null;
  };

  const getControlled = (child, idx) => {
    items[idx].tag = child.props.tag;
    window.console.log(RowCol[idx]);
    return {
      ref: items[idx].ref,
      style: RowCol[idx],
      key: child.props.tag,
      onlyOne: items.length === 1,
      onDockChange: (e) => {
        const find = items.find((i) => {
          return i.tag === e.tag;
        });
        if (find) {
          const { to, fullScreen } = e;
          if (to === 'fullScreen') {
            find.ref.current.setFullScreen(!fullScreen);
            onChange({
              event: 'fullScreen',
              fullScreen: { tag: e.tag, value: !fullScreen },
            });
          } else if (to === 'close') {
            onChange({
              event: 'close',
              close: {
                tag: e.tag,
                value: items
                  .filter((i) => {
                    return i.tag !== e.tag;
                  })
                  .map((i) => {
                    return i.tag;
                  }),
              },
            });
          } else {
            const swap = { i: null, j: null };
            const index = items.indexOf(find);
            if (to === 'left') {
              swap.i = index - 1;
              if (index === 0) {
                swap.i = items.length - 1;
              }
            } else if (to === 'right') {
              swap.i = index + 1;
              if (index === items.length - 1) {
                swap.i = 0;
              }
            }
            swap.j = index;
            items[swap.j] = items.splice(swap.i, 1, find)?.[0];
            items[swap.i].ref.current.setStyle(RowCol[swap.i]);
            items[swap.j].ref.current.setStyle(RowCol[swap.j]);
          }
        }
      },
    };
  };

  return (
    <div className={classnames(styles.root, className, mode === 'nplus1' ? styles.nplus1 : null)} style={style}>
      {updateOptions()}
      {children
        ? (Array.isArray(children) ? children : [children])
            .filter((c) => {
              return c.props.tag !== null;
            })
            .map((child, idx) => {
              return React.cloneElement(child, getControlled(child, idx));
            })
        : null}
    </div>
  );
};

DockPanel.defaultProps = {
  className: null,
  style: null,
  children: null,
  mode: 'normal', // normal nplus1
  onChange: () => {},
};

DockPanel.propTypes = {
  className: PropTypes.any,
  style: PropTypes.any,
  children: PropTypes.any,
  mode: PropTypes.any,
  onChange: PropTypes.func,
};

export default DockPanel;
